<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Divider orientation="left">订单信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>核销订单ID:{{ orderInfo.voucher.order_mall_id }}</div>
        </Col>
        <Col span="12">
          <div>快手订单号:{{ orderInfo.voucher.ks_order_id }}</div>
        </Col>
        <Col span="12">
          <div>券ID:{{ orderInfo.voucher.voucher_id }}</div>
        </Col>
        <Col span="12">
          <div>券号:{{ orderInfo.voucher.code }}</div>
        </Col>
        <Col span="12">
          <div>核销时间:{{ orderInfo.voucher.verify_time }}</div>
        </Col>
      </Row>
      <Divider orientation="left">支付信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>市场价:￥{{ orderInfo.voucher.market_price }}</div>
        </Col>
        <Col span="12">
          <div>团购价:￥{{ orderInfo.voucher.original_amount }}</div>
        </Col>
        <Col span="12">
          <div>用户实付金额:￥{{ orderInfo.voucher.pay_amount }}</div>
        </Col>
        <Col span="12">
          <div>平台营销金额：￥{{ orderInfo.voucher.ticket_amount }}</div>
        </Col>
        <Col span="12">
          <div>达人分佣金额:￥{{ orderInfo.voucher.commission_amount }}</div>
        </Col>
        <Col span="12">
          <div>
            支付优惠金额:￥{{ orderInfo.voucher.payment_discount_amount }}
          </div>
        </Col>
        <Col span="12">
          <div>券实付金额:￥{{ orderInfo.voucher.coupon_pay_amount }}</div>
        </Col>
        <Col span="12">
          <div>
            订单营销总金额:￥{{ orderInfo.voucher.order_discount_amount }}
          </div>
        </Col>
      </Row>
      <Divider orientation="left">商品信息</Divider>
      <Row :gutter="16">
        <Col span="6">
          <!-- <img :src="item.goodsImages" /> -->
          <div class="j-order-image">
            <div class="j-order-image-main">
              <img :src="orderInfo.goods.goodsImages[0]" />
            </div>
            <div class="j-order-image-info">
              <div class="j-order-goods-title">
                {{ orderInfo.goods.goodsName }}
              </div>
              <div class="j-order-goods-num">
                兑换数量:{{ orderInfo.voucher.count }}
              </div>
            </div>
          </div>
        </Col>
      </Row>
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button type="primary" @click="hide()" :loading="loadingBtn">
          <span v-if="!loadingBtn">确定</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "order-ope",
  data() {
    return {
      isShowModal: false,
      loadingBtn: false,
      orderInfo: {
        voucher: {},
        goods: { goodsImages: [""] },
      },
      title: "订单详情",
    };
  },
  methods: {
    // 显示模态框
    show(row) {
      this.isShowModal = true;
      this.getOrderMallById(row);
    },
    // 查询订单详情
    getOrderMallById(row) {
      this.$Spin.show();
      this.axios
        .get("/voucher/v1/getVoucherById", {
          params: { id: row.voucherid },
        })
        .then((res) => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            // this.$Message.success('操作成功.');
            this.orderInfo = res.data;
            if (res.data.goods.goodsImages) {
              this.orderInfo.goods.goodsImages = JSON.parse(
                res.data.goods.goodsImages
              );
            }
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "查看订单详情接口报错",
              duration: 0,
            });
          }
        });
    },
    // 关闭模态框
    hide() {
      this.isShowModal = false;
    },
  },
};
</script>

<style scoped lang="less">
.j-order-image {
  display: flex;

  .j-order-image-main {
    width: 130px;
    height: 130px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .j-order-image-info {
    margin-left: 10px;

    .j-order-goods-sku {
      margin-top: 5px;
    }

    .j-order-goods-price {
      margin-top: 5px;
    }

    .j-order-goods-num {
      margin-top: 5px;
    }
  }
}
</style>
